import React, { useEffect, useState } from "react"
import styles from "./Detail.module.scss"
import { useLocation, useHistory } from "react-router-dom"
import { detailFace } from "../../utils/interface"
import useStore from "../../context/store"
import { useObserver } from 'mobx-react-lite'
const HomeDetail: React.FC = () => {
    const [detailItem, setDetailItem] = useState<object>({})
    let location = useLocation()
    let history = useHistory()
    let { search } = useStore()
    let [text,setText] = useState<string>('')
    useEffect(() => {
        setDetailItem(location.state as object)
    }, [location])
    useEffect(() => {
        search.myDetail((location.state as detailFace).id)
    }, [search, location])
    function goBack() {
        history.goBack()
    }
    function changText(e:React.ChangeEvent<HTMLSelectElement>){
            setText(e.target.value)
            let arr=JSON.parse(e.target.dataset.item)
            let cityId=arr.data.filter((item)=>{
                return item.name===e.target.value
            })[0].id
            search.myFilter((location.state as detailFace).id,cityId)
    }

    return useObserver(() => <div className={styles.wrap}>
        <div className='detail'>
            <header className={styles.push}>
                <button onClick={goBack}>
                    {'<'}
                </button>
                <p className={styles.text}>
                    {(detailItem as detailFace).name}
                </p>
            </header>
        </div>
        <div className={styles.classify}>
            {
                search.dropList.map((item,index)=>{
                    return <select value={text||item.name} key={index} onChange={changText} data-item={JSON.stringify(item)}>
                        {
                            item.data.map((i,n)=>{
                                return <option value={i.name} key={n} >
                                    {i.name}
                                </option>
                            })
                        }
                    </select>
                })
            }
        </div>
        <div className={styles.body}>
            <div className={styles.left}>
                <div className={styles.header}>
                    <span>排名</span>
                    <span>名称</span>
                </div>
                {
                    search.rankDataList.map((item, index) => {
                        return <div key={index}>
                            <div className={styles.phoneName}>
                                <span>{index + 1}</span><img src={item[0].image} alt=""/><span> {item[0].name}</span>
                            </div>
                        </div>
                    })
                }
            </div>
            <div className={styles.right}>
                <div>
                    <div className={styles.header}>
                        {
                            search.rankItemList.map((item, index) => {
                                return <div key={index}>
                                    {item.name}
                                </div>
                            })
                        }
                    </div>
                    {
                        search.rankDataList.map((item: { score: string }[], index) => {
                            return <div key={index} className={styles.spans}>
                                {
                                    item.map((i, num) => {
                                        if (num !== 0) {
                                            return <span key={num}>
                                                {i.score}
                                            </span>
                                        } else {
                                            return ''
                                        }
                                    })
                                }
                            </div>
                        })
                    }
                </div>
            </div>
        </div>
    </div>)
}
export default HomeDetail